<template>
  <div class="hello">
    <!-- 问答列表 -->
    <div class="resList" ref="listWrap">
      <div class="no-data" v-if="list.length === 0">
        <img src="../assets/img/robot.gif" class="logo" alt="logo" />
        <h3>你问我答，有求必应</h3>
      </div>
      <div v-else :class="['record', item.type]" v-for="(item, i) in list" :key="i">
        <img v-if="item.type === 'ask'" :src="require(`../assets/img/ask.png`)" alt />
        <img v-else :src="require(`../assets/img/robot.gif`)" alt />
        <p class="content" v-if="item.content">{{ item.content }}</p>
        <el-skeleton v-else :rows="3" animated style="width: 100%" />
      </div>
    </div>
    <!-- 输入框区域 -->
    <div class="inputArea">
      <el-input type="textarea" autosize placeholder="请输入您的问题，按 Ctrl + Enter 键发送" v-model="inputStr"
        @keyup.native.ctrl.enter="send"></el-input>
      <div class="btns">
        <div class="options">
          <el-radio v-model="radio" label="1">问答</el-radio>
          <el-radio v-model="radio" label="2">翻译</el-radio>
          <el-radio v-model="radio" label="3">聊天</el-radio>
        </div>
        <div class="right-btns">
          <i class="el-icon-delete" title="清空" @click="clear"></i>
          <i class="el-icon-s-promotion" title="发送" @click="send"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {},
  data() {
    return {
      inputStr: "",
      radio: "1",
      list: [],
    };
  },
  computed: {},
  mounted() { },
  methods: {
    send() {
      let question = this.inputStr;
      if (!question) {
        alert("请输入您的问题");
        return false;
      }
      // 清空输入框
      this.inputStr = "";
      // 判断是否是翻译
      let isTranslate = this.radio === "2";
      if (isTranslate) {
        question = `翻译：${question}`;
      }
      // 往列表里推数据
      this.list.push({
        type: "ask",
        content: question,
      });
      this.list.push({
        type: "answer",
        // content: "",
        content: "Sorry, 由于个人免费额度已用尽，本应用暂时停止服务。",
      });
      // 停止服务
      return false;
      // 滚动列表到最底部
      this.$nextTick(() => this.$refs.listWrap.scrollTo(0, 99999999));
      // 提问
      this.ask(question);
    },
    ask(question) {
      let promptData = [
        {
          role: "user",
          content: question,
        },
      ];
      // 如果是聊天模式，就把list加工后发往后端
      if (this.radio === "3") {
        promptData = this.list.slice(0, -1).map((obj) => {
          return {
            role: obj.type === "ask" ? "user" : "assistant",
            content: obj.content,
          };
        });
      }
      this.$axios
        .post(
          "http://18.183.62.177:3000/api/askme",
          {
            model: "gpt-3.5-turbo",
            inputData: promptData,
          },
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        )
        .then((res) => {
          let reply = res.choices[0].message.content;
          if (reply.startsWith("\n\n")) reply = reply.substr(2);
          this.list.at(-1).content = reply;
          this.$nextTick(() => this.$refs.listWrap.scrollTo(0, 99999999));
        });
    },
    clear() {
      this.inputStr = "";
    },
  },
  watch: {},
};
</script>

<style scoped lang="scss">
.hello {
  height: 100%;
  position: relative;

  .resList {
    height: calc(100vh - 150px);
    overflow-y: auto;
    scroll-behavior: smooth;

    .record {
      display: flex;
      padding: 10px;

      img {
        width: 40px;
        height: 40px;
        margin: 10px;
        margin-left: 0;
      }

      p {
        line-height: 1.75;
        flex-grow: 1;
        white-space: pre-wrap;
        font-size: 14px;
        text-align: justify;
        margin-top: 18px;
        margin-right: 20px;
      }
    }

    .record.ask {
      background: #e9f7ff;
    }

    .record.answer {
      // background: #ecf0f1;
    }
  }

  .inputArea {
    width: 86%;
    margin: 0 auto;
    position: absolute;
    bottom: 50px;
    left: 7%;
    box-sizing: border-box;
    padding: 12px;
    border-radius: 6px;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(1px);
    animation: bounceInUp 1s;

    .el-textarea {
      margin: 0 0 10px 0;
    }

    .btns {
      display: flex;
      justify-content: space-between;
      padding: 0 2px;

      i {
        color: #2c3e50;
        font-size: 20px;

        &:hover {
          cursor: pointer;
          color: #42bc9c;
        }
      }

      .el-icon-delete {
        margin-right: 15px;
      }
    }
  }
}

.el-textarea::v-deep textarea {
  resize: none;
  border: none;
  border-bottom: 2px solid #42bc9c;
  border-radius: 0;
  padding-left: 5px;
  padding-right: 5px;
  background: transparent;
}

.el-radio {
  margin-right: 25px;
}

.no-data {
  text-align: center;
  margin-top: 28vh;

  img {
    width: 25vw;
    max-width: 128px;
  }

  h3 {
    color: #4c5863;
    font-family: cursive;
  }
}

@keyframes bounceInUp {

  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
    transform: translate3d(0, 3000px, 0) scaleY(5);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
    transform: translate3d(0, 10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
    transform: translate3d(0, -5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@media screen and (max-width: 500px) {
  .el-radio {
    margin-right: 15px;
  }
}
</style>
